<template>
	<view>
		<swiper class="swiper" :current="banIndex" @change="changeSwiper" :style="{ height: swiperHeight + 'px' }"
			circular indicator-dots :autoplay="autoPlay" :interval="3000" indicator-active-color="#FFDE6D">
			<swiper-item v-if="videoUrl">
				<video id="myVideo" :src="api_host + videoUrl" class="width100" :style="{ height: swiperHeight + 'px' }" :enable-progress-gesture="false"></video>
			</swiper-item>
			<swiper-item v-for="(item,index) in list" :key="index" @click="$utils.previewImages(index,list)">
				<image :id="'wrap' + index" :src="api_host + item" mode="widthFix" class="width100"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {} from '@/common/api.js'
	export default {
		name:'',
		props:{
			list:{
				type:Array,
				default:[]
			},
			videoUrl:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				banIndex:0,
				swiperHeight:250,
				autoPlay:true
			}
		},
		created() {
			this.init()
		},
		methods: {
			init(){
				if(this.videoUrl){
					this.autoPlay = false
					this.videoContext = uni.createVideoContext('myVideo',this)
				}
				const that = this
				var sys = uni.getSystemInfoSync();
				let firstImg = this.api_host + this.list[0]
				uni.getImageInfo({
					src: firstImg,
					success(res) {
						let imgW = res.width
						let imgH = res.height
						let rate = imgW / (sys.windowWidth)
						that.swiperHeight = imgH / rate
					}
				})
			},
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.currIndex = e.detail.current;
				if(this.videoUrl){
					if(this.currIndex == 0){
						this.autoPlay = false
					}else{
						this.autoPlay = true
						this.videoContext.pause()
					}
				}
				this.$nextTick(() => {
					this.setSwiperHeight(); // 动态设置 swiper 的高度
				});
			},
			/* 动态设置 swiper 的高度 */
			setSwiperHeight() {
				const element = "#wrap" + this.currIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					if (res && res[0]) this.swiperHeight = res[0].height;
				});
			},
		}
	}
</script>

<style lang="scss">
	
</style>
